<template>
    <div class="photoinfo-container">
       <h3>{{photoinfo.title}}</h3>
       <p class="subtitle">
           <span>发表时间:{{photoinfo.add_time|dateFormat}}</span>
           <span>点击{{photoinfo.click}}次</span>
       </p>

       <hr>
       <!-- 缩略图 -->
       <div class="thumbs">
            <vue-preview :slides="list"></vue-preview>
       </div>
      <!-- <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="index"> -->

       <!-- 内容 -->
       <div class="content">
           {{photoinfo.content}}
       </div>

       <!-- 评论子组件 -->
        <cmt-box :id="id"></cmt-box>
    </div>
</template>
<script>
import comment from '@/components/subcomponents/comment'
export default {
    data(){
        return{
            id:this.$route.params.id,
            list:[],
            photoinfo:{}
        }
    },
    created(){
        this.getImageInfo(),
        this.getThumbImages()
    },
    methods:{
        async getImageInfo(){
            const {data} = await this.$http.get('api/getimageInfo/'+this.id)
            if(data.status === 0){
                this.photoinfo = data.message[0]
            }
        },
        async getThumbImages(){
            const{data} = await this.$http.get('api/getthumimages/'+this.id)
            if(data.status === 0){
                data.message.forEach(ele => {
                    ele.src = 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
　　　　　　　　　　      ele.msrc = 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
                    ele.w = 600
                    ele.h = 400
                });
                this.list = data.message
            }
        }
    },
    components:{
        'cmt-box':comment
    }
}
</script>
<style lang="scss">
.photoinfo-container{
    padding: 5px;
    h3{
        font-size: 15px;
        color: #226aff;
        margin: 15px 0;
        text-align: center;
    }
    .subtitle{
        font-size: 13px;
        display: flex;
        justify-content: space-between;
    }
    .thumbs{
        figure{
            display: inline;
            margin: 1em 10px;
            img{
                width: 100px;
                height: 100px;
            }
        }
        
    }
    .content{
        line-height: 30px;
        font-size: 13px;
    }
}
</style>
